<template>
  <div class="BusinessDetails">
    <div class="searchBox1">
      <div></div>
      <div>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus1"
        >
        </el-date-picker>
        <el-button
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="searchBusiness"
          >查询搜索</el-button
        >
        <el-button
          icon="el-icon-paperclip"
          size="small"
          @click="businessExportExcel"
          >导出EXCEL</el-button
        >
      </div>
    </div>
    <el-table
      :data="businesstableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
      v-loading="loading"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="matching_time" label="匹配时长"> </el-table-column>
      <el-table-column prop="valid_call_time" label="有效通话时长">
      </el-table-column>
      <el-table-column prop="trend_num" label="发布动态数"> </el-table-column>
      <el-table-column prop="is_finish" label="业务达标">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.is_finish == '未标记'"
            size="small"
            type="warning"
            plain
            @click="businessIsFinish(scope.row.id, '2')"
            >未达标</el-button
          >
          <el-button
            v-if="scope.row.is_finish == '未标记'"
            size="small"
            type="success"
            plain
            @click="businessIsFinish(scope.row.id, '1')"
            >已达标</el-button
          >
          <span v-if="scope.row.is_finish != '未标记'">{{
            scope.row.is_finish
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="businessTotal"
      :page.sync="businessPage"
      :limit.sync="businessPageSize"
      @pagination="businessGetList"
    />
  </div>
</template>

<script>
import {
  userBusinessDetails,
  userBusinessIsFinish,
} from "@/api/UserManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  props: ["userId"],
  data() {
    return {
      loading: false,
      timeArr: [],
      businessStartTime: "",
      businessEndTime: "",
      businesstableData: [],
      businessTotal: 0,
      businessPage: 1,
      businessPageSize: 10,
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    focus1(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.businessStartTime = this.timeArr[0];
      this.businessEndTime = this.timeArr[1];
    },
    //业务详情列表查询
    async businessGetList() {
      if (!this.userId) {
        return;
      }
      this.loading = true;
      const res = await userBusinessDetails({
        page: this.businessPage,
        pageSize: this.businessPageSize,
        startTime: this.businessStartTime,
        endTime: this.businessEndTime,
        user_Id: this.userId,
      });
      if (res.code == 0) {
        this.loading = false;
        this.businessTotal = parseInt(res.data.count);
        this.businesstableData = res.data.list;
        this.businesstableData.forEach((item) => {
          if (item.is_finish == 0) {
            item.is_finish = "未标记";
          }
          if (item.is_finish == 1) {
            item.is_finish = "已达标";
          }
          if (item.is_finish == 2) {
            item.is_finish = "未达标";
          }
        });
      }
    },
    searchBusiness() {
      this.businessPage = 1;
      this.businessGetList();
    },
    //标记业务达标
    businessIsFinish(id, is_finish) {
      this.$confirm("是否标记该条记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userBusinessIsFinish({
            id,
            is_finish,
            user_Id: this.userId,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.businessGetList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //导出功能
    async businessExportExcel() {
      const res = await userBusinessDetails({
        page: 1,
        pageSize: 1000,
        startTime: this.businessStartTime,
        endTime: this.businessEndTime,
        user_Id: this.userId,
      });
      res.data.list.forEach((item) => {
        if (item.is_finish == 0) {
          item.is_finish = "未标记";
        }
        if (item.is_finish == 1) {
          item.is_finish = "已达标";
        }
        if (item.is_finish == 2) {
          item.is_finish = "未达标";
        }
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "匹配时长",
          "有效通话时长",
          "发布动态数",
          "业务达标",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "matching_time",
          "valid_call_time",
          "trend_num",
          "is_finish",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "用户业务详情"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style lang="less" scoped>
.BusinessDetails {
  margin: 0;
  .searchBox1 {
    display: flex;
    justify-content: space-between;
  }
}
</style>